<template>
	<div class="home-box">
		<div class="style-containers-box" style="min-height: 700px;background-color: #fff;">
			<el-collapse v-model="activeNames" @change="handleChange" style="min-height: 700px;background-color: #fff;">
				<el-collapse-item :name="1 + index1 + ''" v-for="(item1, index1) in componentsTypes" :key="'componentsTypes' + index1">
					<template slot="title">
						 <div style="padding-right:60px;font-size:16px;text-align: left;padding-left: 60px;font-weight: 600;">{{item1}}</div>
					</template>
					<div v-for="(item2, index2) in getComponents(item1)" 
						:key="item1 + index2"
						v-sdrag="{componentName: item2.componentName}">
						{{item2.title}}
					</div>
				</el-collapse-item>


				<!-- <el-collapse-item title="活动页其他组件" name="5">
					<div v-sdrag="{componentName: 'GuessYouLike'}">猜你喜欢</div>
					<div v-sdrag="{componentName: 'TabHead'}">tab组件</div>
				</el-collapse-item> -->

			</el-collapse>
		</div>
	</div>
</template>

<script>
	import { Collapse, CollapseItem } from "element-ui";
	import {styleComponents} from "../../config/stystem-params";
	import getPageName from "../../utils/gw/getPageName";
	export default {
		data() {
			return {
				activeNames: ['1', '2', '3', '4','5'],
				componentsTypes: ["宝贝类", "图文类", "营销类", "其他类"]
			}
		},
		methods: {
			handleChange(val) {
				// console.log(val);
			},
			getComponents(type) {
				// console.log("getComponents", getPageName(), styleComponents[getPageName()][type]());
				let _components = styleComponents(getPageName());
				let componentsOfType = _components[type];
				return componentsOfType || [];
			}
		},
		components: {
			"el-collapse": Collapse,
			"el-collapse-item": CollapseItem,
		}
	}
</script>

<style>
.el-collapse-item__wrap{
	text-align: left;
    padding-left: 60px;
}
.el-collapse-item__arrow{
	margin-right: 36px !important
}
</style>